import React from 'react';
import '../css/Counter.css';
import {connect} from 'react-redux';
import {plusAction,minusAction} from '../redux/actions';

class Counter extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            count:2
        }
    }
    render(){
        return(
            <div className="counter">

                <button onClick={()=>{
                    this.props.plus(plusAction())
                }}>+</button>

                <div>{this.props.count}</div>

                <button onClick={()=>{
                    this.props.minus(minusAction())
                }}>-</button>

            </div>
            // <div className="counter">
            //     <button onClick={()=>{
            //         this.state.count++;
            //         this.setState({
            //             count:this.state.count
            //         })
            //     }}>+</button>
            //     <div>{this.state.count}</div>
            //     <button onClick={()=>{
            //         this.state.count--;
            //         if(this.state.count < 1){
            //             this.state.count = 1;
            //         }
            //         this.setState({
            //             count:this.state.count
            //         })
            //     }}>-</button>
            // </div>
        );
    }
}

// 将组件的状态 从 redux 读取 并且放到组件props属性中
function mapStateToProps(rootReducer){
    return{
        count:rootReducer.countReducer.count
    }
}
// 将提交action方法合并到组件props中
function mapActionToProps(dispatch){
    return{
        plus:(action)=>{dispatch(action)},
        minus:(action)=>{dispatch(action)},
    }
}

export default connect(mapStateToProps,mapActionToProps)(Counter);